<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div>名字是: <span>{{}}</span></div>
		<button>修改名字</button>

		<script>
			
			let a =  1
			
			
			
			
			if(a===1&&a===2&&a===3){
				console.log('成功');
			}
			

			/*
			响应式简述
			所谓响应式(Reactive)，放在一个前端框架中，指的就是框架能够主动观察(Observe)状态数据的变化(即Vue中的data)，
			并收集所有依赖(Depend)该数据的监控(Watch)回调代码，在数据发生改动时，主动执行该监控回调以更新目标数据或者更新视图。
			相应地，在Vue版本2.6.14的源码中，存在以下三个主要的类来专门实现响应式：
			
			Observer: 观察者，主要的作用是结合observe辅助方法，通过javascript原生的defineProperty方法，为
			目标数据对象的每个属性添加一个getter和setter，以实现依赖的收集和数据的劫持。其中getter的目的主要是
			为了收集依赖，某处代码如果有引用该数据对应子属性，则会自动触发getter，此时即可以进行依赖的收集；
			而setter主要是为了实现数据的劫持，在该数据被修改时，相应的setter将会触发，此时将会通知相应的依赖项进行执行。
			
			Dep: 依赖，主要的作用是通过观察者模式，将所有持有对应数据依赖回调的监控对象(Watcher)给保存起来到一
			个数组中，当依赖数据发生改变时，通知对应的监控对象来执行相应的依赖回调。
			
			Watcher：监控者，持有依赖目标数据的监控回调。当对应的依赖数据发生变化时，将触发该watcher对应的依
			赖回调以实现响应式。
			
			属性描述符 描述一个属性的信息
			获取属性描述符  obj.getOwnPropertyDescriptor('a')
			Object.defineProperty(Object,proName,define)  --vue2
			对象的属性 的 描述对象
			如果想要设置属性特征，或者想让新创建的属性具备某种属性 就需要使用这个方法。
			换成我们的大白话就是，给一个新对象添加一些属性
			value  值
			writable 是否可赋值 默认时true
			enumerable 是否可枚举 默认是true 不可枚举
			configurable 是否被重新定义 默认是true
			  设置为false之后  enumerable   configurable get  set就不能更改了
			get和set 属性 就是拿取和设置属性
			注意：当使用get和set时 就不能在设置value和writable属性
			var obj = {
			    count: 1,
				_count: 1,
				a:20
			};
			Object.defineProperty(obj,'count',{
				get(){
					console.log('虎丘了');
					return this._count
				},
				set(value){
					console.log(value);
					this._count = value
				}
			})
			
						
			
			Proxy   vue3
			创建Proxy语法
			
			new Proxy(target,handler)
			Proxy对象的所有用法，都是这种形式，不同的知识handler参数的写法
			
			new Proxy()表示生成一个Proxy实例
			target参数表示所要拦截的目标对象
			handler参数也是一个对象，用来定制拦截行为
			拦截读取属性行为
			
			要使Proxy起作用，必须针对Proxy实例进行操作，而不是针对代理的对象（目标对象）进行操作
			
			get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
			set(target, propKey, value, receiver)：拦截对象属性的设置，比如- - proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
			has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
			deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
			ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
			getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
			defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
			preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
			getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
			isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
			setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
			apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
			construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。
			*/
		</script>
	</body>
</html>